<template>
	
	<el-dialog center width="65%" :visible.sync="dialogVisible" @close="close">
      	<div slot="title" class="upload-dialog-title">
        	正文图片
      	</div>
      	<div class="upload-dialog-content">

        	<!-- 正文图片 -->
        	<div class="local-img-wrap">
          
            	<div class="local-img-result">
              
              		<el-row :gutter="10" v-show="imgs.length>0">
                		<el-col v-for="(item,index) in imgs" :key="index" class="material-item-wrap" :span="6">
                  
                  			<div class="material-item" :class="{'selected':item.selected}" :data-sort="item.selectIndex !== undefined ? item.selectIndex : null" @click="itemClick(item,imgs)">
                    			<img :src="item.url">
                  			</div>

                		</el-col>
              		</el-row>

              		<div v-show="imgs.length==0">正文中还没插入图片，请先上传图片</div>

            	</div>

        	</div>

      	</div>

      	<div slot="footer" class="upload-dialog-footer">
        	<!-- 素材库按钮 -->
      		<el-button type="danger" @click="cancel">取消</el-button>
      		<el-button v-show="imgs.length != 0" type="primary" @click="confirm">确认</el-button>
      	</div>

    </el-dialog>

</template>

<script>
import { deepClone, isInArray } from '@/utils/util'
import website from '@/config/website'
const imgPreviewPrefix = website.imgPreviewPrefix
export default{
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		data:{
			type:Array,
			required:true
		},
		type:{
			type:[Number,String],
			default:1
		},
		defaultSelect:{
			type:Array,
			default:function(){
				return []
			}
		}
	},
	data(){
		return{
			dialogVisible:false,
			imgs:[],
			//已选的图片
			selected:[],
			defaultSelectIds:[],
			selectIndex:0
		}
	},
	computed:{

	},
	watch:{
		visible(val){
			this.dialogVisible = val;
			//this.imgs = deepClone(this.data);
			//对defaultSelect进行筛选过滤，选择出有效的图片id
			this.defaultSelectIds = this.filterDefaultImgIds(this.defaultSelect);
			this.selectIndex = this.defaultSelectIds.length;

			this.imgs = this.convertToImgsObj(this.data);
			
		}
	},
	methods:{
		//过滤已选图片，剔除空元素
		filterDefaultImgIds(arr){
			var tmp = [];
			for(var i=0;i<arr.length;i++){
				if(arr[i]){
					tmp.push(arr[i])
				}
			}

			return tmp;
		},
		//将图片id数组转换成图片对象数组
		convertToImgsObj(imgIds){
			var arr = [];
			if(imgIds.length === 0) return arr;
			for(var i=0;i<imgIds.length;i++){
				var index = isInArray(this.defaultSelect,imgIds[i]);

				var item = {};
				item["fileId"] = imgIds[i];
				item["url"] = imgPreviewPrefix+imgIds[i];
				//判断当前图片是否为默认已选择
				if(this.type == 1){
					
					if(index !== -1){
						item["selected"] = true;
						//推入到已选数组 this.selected
						this.selected.push(item)
					}else{
						item["selected"] = false;
					}

				}else if(this.type == 2){

					if(index !== -1){
						item["selected"] = true;
						item["selectIndex"] = index+1;
						this.selected.push(item)
					}else{
						item["selected"] = false;
					}

				}
				
				arr.push(item)
			}

			return arr;
		},
		//标注默认选择
		initDefaultSalect(){
			if(this.defaultSelect.length == 0) return;
			//判断是几图
		},
		//选择缩略图
        itemClick(item,list){

        	if(this.type == 1){
        		//单图
        		for(let i=0;i<list.length;i++){
    				list[i]["selected"] = false;
    			}
    			//已选需要移除
        		this.selected = [];
        		if(!item.selected){
        			item["selected"] = true;
        			this.selected.push(item);
        		}
        	}

        	if(this.type == 2){
        		//3图
        		if(item.selected){
        			for(let i=0;i<list.length;i++){
    					if(typeof list[i]['selectIndex'] !== 'undefined' && list[i]['selectIndex'] > item['selectIndex']){
    						list[i]['selectIndex'] = Number(list[i]['selectIndex']) - 1;
    					}
    				}

    				for(let j=0;j<this.selected.length;j++){
    					if(this.selected[j].fileId == item.fileId){
    						this.selected.splice(j,1)
    					}
    				}

    				delete item["selectIndex"];
    				this.selectIndex--;

        		}else{


        			if(this.selected.length<3){
        				this.selectIndex++;
        				
        			}else{
        				this.selected.splice(0,1);
        				for(let i=0;i<list.length;i++){
	    					if(typeof list[i]['selectIndex'] !== 'undefined'){
	    						if(list[i]['selectIndex'] == 1){
	    							list[i]['selected'] = false;
	    							delete list[i]['selectIndex']
	    						}else{
	    							list[i]['selectIndex'] = Number(list[i]['selectIndex']) - 1;
	    						}
	    					}
	    				}
        			}



        			item["selectIndex"] = this.selectIndex;
        			this.selected.push(item)

        		}

        		item.selected = !item.selected;
        	}

        	

        },
        close(){
        	this.dialogVisible = false;
        	this.selected = [];
        	this.selectIndex = 0;
			this.imgs = [];
			this.defaultSelectIds = [];
        	this.$emit('close')
        },
        cancel(){
        	this.close();
        },
        confirm(){
        	this.$emit('confirm',this.selected)
        	this.close();
        }
	}
}

</script>

<style lang="scss" scoped>
.upload-dialog-content{
    min-height: 400px;
    .local-img-result{
    	margin-top: 5px;
    	.material-item{
    		min-height:180px;
    		padding: 5px;
    		margin-bottom: 5px;
    		border:1px solid #999;
    		position: relative;
    		&:hover{
    			border-color:#ff8406;
    		}
    		&.selected{
    			&:before{
    				content: "";
				    display: block;
				    position: absolute;
				    top: 0;
				    left: 0;
				    width: 100%;
				    height: 100%;
				    z-index: 1000;
				    background-color: rgba(0,0,0,.5);
    				background-image: url();
				    background-size: 40px 40px;
				    background-position: 100% 0;
				    background-repeat: no-repeat;
				    text-align: center;
				    color: #fffacd;
    			}
    			&:after{
				    content: attr(data-sort);
				    display: block;
				    position: absolute;
				    top: 50%;
				    left: 50%;
				    transform: translate(-50%,-50%);
				    z-index: 1001;
				    font-size: 30px;
				    color: #fffacd;
				}
    		}
    		img{
    			width:100%;
    			max-height: 160px;
    		}

		}
	}
}	
</style>